<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、分析</h2>
  <div>首先vue是构造函数</div>
  <br>
  <ul>
    <li>在调用beforeCreate之前，数据初始化并未完成，像data、props这些属性无法访问到</li>
    <li>到了created的时候，数据已经初始化完成，能够访问data、props这些属性，但这时候并未完成dom的挂载，因此无法访问到dom元素</li>
    <li>挂载方法是调用vm.$mount方法</li>
    <li>initState方法是完成props/data/method/watch/methods的初始化</li>
    <ul>
      <li>初始化顺序：props、methods、data</li>
      <li>data定义的时候可选择函数形式或者对象形式（组件只能为函数形式）</li>
    </ul>
  </ul>
  <ul>
    <li>不要将根元素放到body或者html上</li>
    <li>可以在对象中定义template/render或者直接使用template、el表示元素选择器</li>
    <li>最终都会解析成render函数，调用compileToFunctions，会将template解析成render函数</li>
    <ul>
      <li>将html文档片段解析成ast描述符</li>
      <li>将ast描述符解析成字符串</li>
      <li>生成render函数</li>
    </ul>
  </ul>
  <br>
  <div>生成render函数，挂载到vm上后，会再次调用mount方法</div>
  <br>
  <div>调用mountComponent渲染组件</div>
  <ul>
    <li>会触发boforeCreate钩子</li>
    <li>定义updateComponent渲染页面视图的方法</li>
    <li>监听组件数据，一旦发生变化，触发beforeUpdate生命钩子</li>
    <li>updateComponent方法主要执行在vue初始化时声明的render，update方法</li>
    <li>render的作用主要是生成vnode</li>
    <li>_update主要功能是调用patch，将vnode转换为真实DOM，并且更新到页面中</li>
  </ul>
  <h2>三、结论</h2>
  <ul>
    <li>new Vue的时候调用会调用_init方法</li>
    <ul>
      <li>定义 $set、$get 、$delete、$watch 等方法</li>
      <li>定义 $on、$off、$emit、$off等事件</li>
      <li>定义 _update、$forceUpdate、$destroy生命周期</li>
    </ul>
    <li>调用$mount进行页面的挂载</li>
    <li>挂载的时候主要是通过mountComponent方法</li>
    <li>定义updateComponent更新函数</li>
    <li>执行render生成虚拟DOM</li>
    <li>_update将虚拟DOM生成真实DOM结构，并且渲染到页面中</li>
  </ul>
</body>
</html>